iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

每天來點 Vue.js 吧系列 第 17

Vue component 父組件向子組件傳遞數據的方法 - Prop(下)

  • 分享至 

  • xImage
  •  
tags: Vuejs

前言 ✐

上一篇中說明了透過 Prop,我們可以將父組件的值傳遞給子組件,這一篇中,我們會來看 Prop 的使用細節。

命名規則 ✐

在介紹 Prop 大小寫前,我們先離題一下,來介紹一下 命名規則

命名規則在維基百科的定義:
In computer programming, a naming convention is a set of rules for choosing the character sequence to be used for identifiers which denote variables, types, functions, and other entities in source code and documentation.

命名規則通常取決於 context,使用的原因通常是為了減少閱讀及理解源程式碼的精力 ^wiki^,儘管選擇上不同派系的觀點並不是完全相同,但有幾點共同的影響要素,今天要說的便是多字標識符 Multiple-word identifiers:

多字標識符 Multiple-word identifiers

由於大多數編程語言都不允許標識符存在空白,需要一種界定多個單字識別的方法。舉例來說像是 get data -> getdata 閱讀及理解上都並不直觀。

下列列出幾種多字標識符格式:

two words 這個單字作為範例

命名規則 範例 補充
upper Camel Case TwoWords 來自 Perl 語言中大小寫混合格式、
lower Camel Case twoWords
Snake Case two_words
Screaming Snake Case TWO_WORDS
Camel Snake Case Two_Words
kebab-case two-words

補充 ✒︎ : 匈牙利命名法^wiki^(Hungarian notation)是電腦程式設計中的一種變數命名規則,一個變數名由一個或多個小寫字母開始,這些字母有助於記憶變數的類型和用途,緊跟著的就是程式設計師選擇的任何名稱。這個後半部分的首字母可以大寫,以區別前面的類型指示字母(參見駝峰式大小寫)。

範例:
strName:變數代表一個包含名字的字串("str")但是沒有指明這個字串是如何實現的。

Prop 大小寫

使用 Prop 時,我們需要先在子元件定義 Prop attribute 名稱,以 two words 為範例,會如同下方:

Vue.component("my-component", {
  props: ["twoWords"],
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

父元件使用 DOM 模板時,由於 HTML 大小寫不敏感,所以在子元素中以 camel case 定義的 Prop attribute 需要使用等價的 kebab-case 名稱:

✅ 要這樣:

<my-component two-words="words">

? 不要這樣:

<my-component twoWords="words">

記住,這是在使用 DOM 作為模板時,如果使用的是 template 模板則無此限制。

Prop 類型

在子組件中,註冊 Prop attribute 時,我們剛才都是使用 Array,不過子組件若是要對傳入的值設定 類型檢查默認值,可以使用 Object 配置詳細的選項。

使用 Array

Vue.component("my-component", {
  props: ["twoWords"],
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

使用 Object

Vue.component("my-component", {
  props: {
      twoWords: {
      // 類型驗證
      type: String,
      // 預設值,當沒有傳入值時的預設值
      default: '預設文字',
      // 是否是必填項目
      required: true,
      // 驗證傳入值的函數
      validator: function(value) {
          return value.length > 3
      }
      }
  },
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

透過設定物件值的 props,可以帶來以下優點:

  1. 驗證 prop 類型,當有非子元件預設的 prop 類型被傳入,可以在 console 控制台中看到錯誤提示
  2. 為組件提供傳入值的詳細文檔,他人使用該組件時,可以知道要傳入什麼類型的值,以及該值需要通過什麼驗證。

就結論來說,比起 Array 形式,使用 Object 形式的 prop 在日後複用組件以及驗證上都更加有優點。

傳入靜態或動態的 Prop 值

簡單來說結合 v-bind 我們可以給予 prop attribute 傳入動態的值。

<my-component v-bind:two-words="words">

單向數據流

這裡與前半部 v-model雙向綁定不同,這裡指的是組件之間的單向數據流,使用 prop 傳輸的數據都是 單向的 自父組件傳入子組件。

子組件的數據不會反向流動回父組件,這樣會造成數據追蹤管理的麻煩。單向數據流一旦父組件數據更動,子組件的 prop 也會連動更新。

如果需要更動傳入的值,可以使用以下方法:

使用 prop 傳遞初始值,但是組件之後需要將 prop 作為本地值改動。

這個時候可以定義一個本地的 data,將該 prop 作為初始值:

...
  props: ["twoWords"],
  data(){
  return {
  text: this.twoWords
  }
  },
...

以上為此次內容,感謝看到這裡的你,我們明天見。


若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM


參考資料:

  1. Vuejs.org 2.x
  2. 命名規則 | ShunNien’s Blog
  3. Naming convention (programming) - Wikipedia

上一篇
Vue component 父組件向子組件傳遞數據的方法 - Prop(上)
下一篇
Seeking the Balance in Framework Design
系列文
每天來點 Vue.js 吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言